<template v-if="visible">
    <a-modal v-model:open="visible" :title="title" @ok="handleOk">
        <a-form
            ref="formRef"
            :model="formState"
            :rules="rules"
            :label-col="{ span: 4 }"
            autocomplete="off"
            v-if="visible"
        >
            <a-form-item label="产品名" name="productName">
                <a-input v-model:value="formState.productName" />
            </a-form-item>
            <a-form-item label="产地" name="countyName">
                <a-input v-model:value="formState.countyName" />
            </a-form-item>
            <a-form-item label="图片" name="imageUrl">
                <a-row v-if="formState.imageUrl" align="middle">
                    <a-image
                        style="width: 150px; max-height: 100%"
                        :src="formState.imageUrl"
                        alt="avatar"
                    />
                    <a-button style="margin-left: 10px" @click="formState.imageUrl = ''"
                        >更换头像</a-button
                    >
                </a-row>
                <a-upload
                    v-else
                    v-model:file-list="fileList"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :before-upload="beforeUpload"
                >
                    <div>
                        <loading-outlined v-if="loading"></loading-outlined>
                        <plus-outlined v-else></plus-outlined>
                        <div class="ant-upload-text" v-else>点击上传</div>
                    </div>
                </a-upload>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import type { Ref } from 'vue'
import Lodash from 'lodash'

import { uploadImg } from '@/views/homes/user-center/store'

import { toast } from '@/utils/common'
import { Edit } from '../../store'
import type { ItemResponse } from '../../type'
const defaultFormState = {
    id: '',
    productName: '',
    countyName: '',
    imageUrl: ''
}
export default defineComponent({
    name: 'EditDialog',
    emits: ['refresh'],

    setup(props, { emit }) {
        const state = reactive({
            visible: false,
            title: '',
            formState: JSON.parse(JSON.stringify(defaultFormState)),
            fileList: [] as Array<any>,
            loading: false
        })

        const constants = {
            rules: {} as any
        }
        for (let key in defaultFormState) {
            constants.rules[key] = {
                required: true,
                message: `请输入`,
                trigger: 'blur'
            }
        }
        const components = {
            formRef: ref<FormInstance>()
        } as {
            formRef: Ref<FormInstance>
        }
        const methods = {
            open(row?: ItemResponse) {
                state.title = row?.id ? '编辑' : '新增'
                if (row) {
                    state.formState = Lodash.cloneDeep(row)
                } else {
                    state.formState = JSON.parse(JSON.stringify(defaultFormState))
                }
                state.visible = true
            },
            async handleOk() {
                const isOK = await components.formRef.value.validateFields()
                if (!isOK) return
                let params = Lodash.cloneDeep(state.formState)
                console.log(params)

                const res: any = await Edit(params)
                if (res.status === 201) {
                    toast('err', '', res.result.msg)
                    return
                }
                emit('refresh')
                state.visible = false
                toast()
            },
            async beforeUpload(file: any) {
                state.loading = true
                const formdata = new FormData()
                formdata.append('image', file)
                try {
                    const res = await uploadImg(formdata)
                    state.formState.imageUrl = res.imageUrl
                } catch (err) {
                    console.log(err)
                } finally {
                    state.loading = false
                }
                return false
            }
        }
        return {
            ...toRefs(state),
            ...methods,
            ...constants,
            ...components
        }
    }
})
</script>
